<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <van-cell-group>
        <div class="subscribe-job">
          <p>
            <label>意向岗位</label>
            <span @click="onZNEdit">{{
              selected_zn.length > 0 ? "修改" : "添加"
            }}</span>
          </p>
          <ul>
            <li v-for="(item, index) in selected_znName" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
        <van-cell
          title="期望地区"
          :value="select_pick_area"
          is-link
          size="large"
          @click="showPicker_area = true"
        />
        <van-cell
          title="期望薪资"
          :value="select_pick_monthPayVal"
          @click="showPicker_monthpay = true"
          is-link
          size="large"
        />
      </van-cell-group>
      <div style="padding: 20px 16px 0">
        <van-button
          round
          block
          type="primary"
          color="#f70"
          style="font-size: 18px"
          :loading="loading_submit"
          @click="onsubmit"
          text="保存"
        >
        </van-button>
      </div>
    </div>
    <!-- 选择期望职位 start -->
    <van-popup
      v-model="showPicker_zn"
      position="bottom"
      style="height: 100%; z-index: 9999"
    >
      <div class="jobs-picker">
        <!-- 标题头 -->
        <div class="top">
          <p>
            <button type="button" @click="showPicker_zn = false">取消</button>
            <span>选择期望职位（最多3个）</span>
            <button type="button" @click="onZNSubmit">确认</button>
          </p>
          <van-search
            v-model="kw_zn"
            clear-trigger="always"
            @search="onZNSearch"
            @clear="onZNSearchClear"
            shape="round"
            placeholder="请输入搜索关键词"
            style="border-bottom: 0.5px solid #e8e8e8"
          />
        </div>
        <!-- 结果 -->
        <ul class="result" v-if="selected_zn_search.length > 0">
          <li
            v-for="(item, index) in selected_zn_search"
            :key="index"
            @click="onZNThreeClick(item)"
          >
            <!-- <p>{{ item.value }}</p> -->
            <p
              v-html="item.value.replace(kw_zn, '<span>' + kw_zn + '</span>')"
            ></p>
            <p>{{ item.title }}</p>
          </li>
        </ul>
        <!-- 选项 -->
        <div class="branch" v-if="selected_zn_search.length === 0">
          <ul class="first">
            <li
              v-for="(item, index) in select_zn_one"
              :key="index"
              @click="onZNOneClick(item)"
            >
              {{ item.value }}
            </li>
          </ul>
          <div
            class="shade"
            v-if="select_zn_two.length > 0"
            @click="select_zn_two = []"
          ></div>
          <div class="popu" v-if="select_zn_two.length > 0">
            <!-- 二级 -->
            <ul class="second">
              <li
                :class="{ select: select_zn_two_id === item.id }"
                v-for="(item, index) in select_zn_two"
                :key="index"
                @click="onZNTwoClick(item)"
              >
                {{ item.value }}
              </li>
            </ul>

            <!-- 三级 -->
            <ul class="three">
              <li
                v-for="(item, index) in select_zn_three"
                :key="index"
                @click="onZNThreeClick(item)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 已选 -->
        <div class="selected" v-if="selected_znName_sel.length > 0">
          <label>已选：</label>
          <ul>
            <li
              v-for="(item, index) in selected_znName_sel"
              :key="index"
              @click="onZNSelRemove(index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
    <!-- 选择期望职位 end -->
    <van-popup v-model="showPicker_area" round position="bottom">
      <div class="subscribe-area-picker">
        <p>
          <button type="button" @click="showPicker_area = false">取消</button>
          <span>选择期望地区（多选）</span>
          <button type="button" @click="onAreaSubmit">确认</button>
        </p>
        <ul>
          <li
            :class="{ selected: selected_area.indexOf(item.itemID) >= 0 }"
            v-for="(item, index) in select_area"
            :key="index"
            @click="onAreaSelect(item)"
          >
            {{ item.itemVal }}
          </li>
        </ul>
      </div>
    </van-popup>
    <van-popup
      v-model="showPicker_monthpay"
      :lazy-render="false"
      round
      position="bottom"
    >
      <van-picker
        title="期望薪资"
        show-toolbar
        :columns="select_monthpay"
        @confirm="onPickMonthPayConfirm"
        @cancel="showPicker_monthpay = false"
        ref="pickMonthPay"
      />
    </van-popup>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  PersonLoginedGetJobSubscribe,
  PersonLoginedUpdateJobSubscribe,
} from "@/util/http";
import {
  getAreaJX,
  GetMonthPayMin,
  GetMonthPayMax,
  GetJobZNOne,
  GetJobZNTwo,
  GetJobZNThree,
} from "@/util/selectData";
import {
  Cell,
  CellGroup,
  Field,
  Picker,
  Popup,
  Toast,
  Button,
  Search,
} from "vant";
import Global from "@/Global";
export default {
  name: "JobSubscribe",
  components: {
    NavBar,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Search.name]: Search,
  },
  props: ["title"],
  mounted() {
    PersonLoginedGetJobSubscribe().then((res) => {
      // console.log(res);
      if (res.result === 1) {
        this.postData.Area = res.data.Area;
        this.postData.MonthPayMin = res.data.MonthPayMin;
        this.postData.MonthPayMax = res.data.MonthPayMax;
        this.postData.Position = res.data.Position;

        //职能
        this.selected_zn = res.data.Position.split(",");
        this.selected_znName = res.data.PositionStr.split("，");
        this.selected_znName_sel = res.data.PositionStr.split("，");

        //地区
        this.select_pick_area = res.data.AreaStr.replace(/嘉兴市->/g, "");
        this.selected_area = res.data.Area.split(",");
        this.selected_areaName = this.select_pick_area.split("，");

        //薪资
        this.select_pick_monthPayVal = res.data.MonthPayStr;
        let index_monthpay = [0, 0];
        for (let i = 0; i < this.select_monthpay.length; i++) {
          let item = this.select_monthpay[i];
          if (item.id === res.data.MonthPayMin + "") {
            index_monthpay[0] = i;
          }
          let array_child = item.children;
          for (let j = 0; j < array_child.length; j++) {
            let item_child = array_child[j];
            if (item_child.id === res.data.MonthPayMax + "") {
              index_monthpay[1] = j;
              break;
            }
          }
          if (index_monthpay[0] != 0 && index_monthpay[1] != 0) break;
        }
        this.$refs.pickMonthPay.setIndexes(index_monthpay);
      }
    });
  },
  // 定义属性
  data() {
    return {
      showPicker_zn: false,
      kw_zn: "",
      select_zn_one: GetJobZNOne(),
      select_zn_two: [],
      select_zn_two_id: "",
      select_zn_three: [],
      selected_zn_search: [],
      selected_zn: [],
      selected_znName: [], //选择的 点确定后 显示的
      selected_znName_sel: [], //选择的
      showPicker_area: false,
      select_area: getAreaJX(),
      selected_area: [],
      selected_areaName: [],
      select_pick_area: "去选择",
      showPicker_monthpay: false,
      select_pick_monthPayVal: "去选择",
      postData: {
        MonthPayMin: 0,
        MonthPayMax: 0,
        Area: "",
        Position: "",
      },
      loading_submit: false,
    };
  },
  computed: {
    select_monthpay() {
      let array = new Array();
      let array_monthPayMin = GetMonthPayMin();
      array_monthPayMin.forEach((item) => {
        let id = item.id;
        let name = item.name;
        let children = new Array();

        let array_child = GetMonthPayMax(id);
        array_child.forEach((item_child) => {
          let id_child = item_child.id;
          let name_child = item_child.name;
          children.push({ id: id_child, text: name_child });
        });

        let data = {
          id,
          text: name,
          children,
        };
        array.push(data);
      });
      return array;
    },
  },
  // 方法集合
  methods: {
    //职能编辑
    onZNEdit() {
      this.showPicker_zn = true;
    },
    //职能大类选择
    onZNOneClick(item) {
      this.select_zn_two = GetJobZNTwo().filter((item_two) => {
        return item_two.id.substr(0, 2) === item.id;
      });
      this.onZNTwoClick(this.select_zn_two[0]);
    },
    //职能中类选择
    onZNTwoClick(item) {
      this.select_zn_two_id = item.id;
      this.select_zn_three = GetJobZNThree().filter((item_three) => {
        return item_three.id.substr(0, 4) === item.id;
      });
    },
    //职能小类选择
    onZNThreeClick(item) {
      if (this.selected_zn.length === 3) {
        Toast("最多选择3个意向岗位");
        return;
      }
      if (this.selected_zn.indexOf(item.id) >= 0) {
        Toast("该意向岗位已经选择");
        return;
      }
      if (item.id.substr(4, 2) === "01" || item.id.substr(4, 2) === "99") {
        let data_two = GetJobZNTwo().filter((item_two) => {
          return item.id.substr(0, 4) === item_two.id;
        })[0];
        this.selected_zn.push(item.id);
        this.selected_znName_sel.push(data_two.value + "-" + item.value);
      } else {
        this.selected_zn.push(item.id);
        this.selected_znName_sel.push(item.value);
      }
    },
    //删除已选职能
    onZNSelRemove(index) {
      this.selected_znName_sel.splice(index, 1);
      this.selected_zn.splice(index, 1);
    },
    //搜索职能
    onZNSearch(val) {
      this.selected_zn_search = [];
      if (val === "") {
        Toast("请输入关键字");
        return;
      }
      if (val === "所有" || val === "其他") {
        Toast("搜索不到该岗位");
        return;
      }
      let array_result = GetJobZNThree().filter((item) => {
        return item.value.indexOf(val) >= 0;
      });
      if (array_result.length > 0) {
        let array_one = GetJobZNOne();
        let array_two = GetJobZNTwo();
        array_result.forEach((item) => {
          let item_tow = array_two.filter((i) => {
            return i.id === item.id.substr(0, 4);
          })[0];
          let item_one = array_one.filter((i) => {
            return i.id === item.id.substr(0, 2);
          })[0];

          item.title = `${item_one.value}-${item_tow.value}`;
        });
        this.selected_zn_search = array_result;
      } else {
        Toast("搜索不到该岗位");
        return;
      }
    },
    onZNSearchClear() {
      this.selected_zn_search = [];
    },
    onZNSubmit() {
      if (this.selected_zn.length === 0) {
        Toast("请选择意向岗位");
        return;
      }
      this.showPicker_zn = false;
      let nameStr = JSON.stringify(this.selected_znName_sel);
      this.selected_znName = JSON.parse(nameStr);
      this.postData.Position = this.selected_zn.join();
    },
    //选择地区
    onAreaSelect(item) {
      let index = this.selected_area.indexOf(item.itemID);
      if (index >= 0) {
        this.selected_area.splice(index, 1);
        this.selected_areaName.splice(index, 1);
      } else {
        if (this.selected_area.length === 3) {
          Toast("最多选3个");
          return;
        }
        this.selected_area.push(item.itemID);
        this.selected_areaName.push(item.itemVal);
      }
    },
    //选择地区-确定
    onAreaSubmit() {
      if (this.selected_area.length === 0) {
        Toast("请选择");
        return;
      }
      this.select_pick_area = this.selected_areaName.join();
      this.postData.Area = this.selected_area.join();
      this.showPicker_area = false;
    },
    //选择薪资
    onPickMonthPayConfirm(value, index) {
      // console.log('onPickMonthPayConfirm', value, index)
      // console.log(this.select_monthpay[index[0]].id, this.select_monthpay[index[0]].children[index[1]].id)
      this.select_pick_monthPayVal = `${value[0]} ~ ${value[1]}`;
      this.postData.MonthPayMin = this.select_monthpay[index[0]].id;
      this.postData.MonthPayMax =
        this.select_monthpay[index[0]].children[index[1]].id;
      this.showPicker_monthpay = false;
    },
    //提交保存
    onsubmit() {
      if (this.postData.Position === "") {
        Toast("请选择意向岗位");
        return;
      }
      if (this.postData.Area === "") {
        Toast("请选择期望地区");
        return;
      }
      if (this.postData.MonthPayMin === 0) {
        Toast("请选择期望薪资");
        return;
      }
      this.loading_submit = true;
      PersonLoginedUpdateJobSubscribe(this.postData).then((res) => {
        this.loading_submit = false;
        Toast(res.msg);
        if (res.result === 1) {
          setTimeout(() => {
            this.$bus.$emit(Global.bus_person_jobSubscribe, "ok");
            this.$router.go(-1);
          }, Global.setTimeout_time);
        }
      });
    },
  },
};
</script>

<style>
.subscribe-job {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #fff;
}

.subscribe-job::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 0.5px;
  background-color: #e8e8e8;
}

.subscribe-job p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
}

.subscribe-job p label {
  font-size: 16px;
  color: #333;
}

.subscribe-job p label::after {
  content: "（最多选3个）";
  font-size: 14px;
  color: #888;
}

.subscribe-job p span {
  padding: 0 8px;
  border: 1px solid #f70;
  border-radius: 15px;
  font-size: 12px;
  color: #f70;
}

.subscribe-job ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.subscribe-job ul li {
  display: flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #f70;
  border-radius: 30px;
  margin: 4px 6px 2px 0;
  font-size: 14px;
  color: #f70;
}

.subscribe-area-picker {
  position: relative;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.subscribe-area-picker p {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 44px;
  background-color: #fff;
}

.subscribe-area-picker p span {
  max-width: 50%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.subscribe-area-picker p button {
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.subscribe-area-picker p button:nth-child(1) {
  color: #969799;
}

.subscribe-area-picker p button:nth-child(3) {
  color: #576b95;
}

.subscribe-area-picker ul {
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
}

.subscribe-area-picker ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.33% - 14px);
  height: 36px;
  border: 1px solid #f9f9f9;
  border-radius: 32px;
  margin: 6px;
  background-color: #f9f9f9;
  font-size: 15px;
  color: #333;
}

.subscribe-area-picker ul li.selected {
  border-color: rgba(255, 119, 0, 0.1);
  background-color: rgba(255, 119, 0, 0.08);
  color: #f70;
  font-weight: 500;
}

.jobs-picker {
  position: relative;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.jobs-picker .top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.jobs-picker .top p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobs-picker .top p span {
  max-width: 50%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.jobs-picker .top p button {
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.jobs-picker .top p button:nth-child(1) {
  color: #969799;
}

.jobs-picker .top p button:nth-child(3) {
  color: #576b95;
}

.jobs-picker .selected {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 888;
  display: flex;
  height: 32px;
  padding: 10px 15px;
  border-top: 0.5px solid #e8e8e8;
  background-color: #fff;
}

.jobs-picker .selected label {
  display: flex;
  align-items: center;
  flex: 0 0 42px;
  height: 32px;
  font-size: 14px;
  color: #333;
}

.jobs-picker .selected ul {
  display: flex;
  align-items: center;
  flex: 1;
  height: 32px;
  margin: 0;
  overflow: hidden;
}

.jobs-picker .selected ul li {
  position: relative;
  max-width: 32%;
  height: 30px;
  padding: 0 15px 0 8px;
  border: 1px solid rgba(255, 119, 0, 0.25);
  border-radius: 30px;
  background-color: rgba(255, 119, 0, 0.05);
  font-size: 13px;
  color: #f70;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

.jobs-picker .selected ul li + li {
  margin-left: 2%;
}

.jobs-picker .selected ul li::before,
.jobs-picker .selected ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 1px;
  height: 10px;
  background-color: #f70;
}

.jobs-picker .selected ul li::before {
  transform: translateY(-50%) rotate(-45deg);
}

.jobs-picker .selected ul li::after {
  transform: translateY(-50%) rotate(45deg);
}

.jobs-picker .result {
  padding-left: 15px;
  margin: 99px 0 52.5px;
}

.jobs-picker .result li {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px 0;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobs-picker .result li p:nth-child(1) {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.jobs-picker .result li p:nth-child(2) {
  margin-top: 2px;
  font-size: 12px;
  color: #aaa;
}

.jobs-picker .result li p span {
  color: #f70;
}

.jobs-picker .branch {
  margin: 99px 0 52.5px;
}

.jobs-picker .first {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.jobs-picker .first li {
  display: flex;
  align-items: center;
  height: 46px;
  border-bottom: 0.5px solid #e8e8e8;
  font-size: 16px;
  color: #333;
}

.jobs-picker .shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}

.jobs-picker .popu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 333;
  display: flex;
  width: 90%;
  padding: 99px 0 52.5px;
  background-color: #fff;
  animation-name: bounceIn;
  animation-fill-mode: both;
  animation-duration: 0.3s;
  overflow-y: auto;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateX(44%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.jobs-picker .second {
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow-y: scroll;
}

.jobs-picker .second li {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: #666;
  line-height: 21px;
}

.jobs-picker .second li.select {
  color: #ff7700;
}

.jobs-picker .second li.select::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 20px;
  background-color: #ff7700;
  transform: translateY(-50%);
}

.jobs-picker .three {
  display: flex;
  flex-direction: column;
  width: 50%;
  background-color: #f7f7f7;
  overflow-y: scroll;
}

.jobs-picker .three li {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: #666;
  line-height: 21px;
}

.jobs-picker .three li.select {
  color: #f70;
}
</style>
